<template>
  <Dialog v-model="show" :title="t('discountActivity.detailTitle')" width="800px" @close="close">
    <div class="overflow-y-auto">
      <div class="detail-info">
        <div class="flex lht-38">
          <div class="text-right w-120 color-666666 flex-shrink-0">
            {{ t('discountActivity.activityName') }}：
          </div>
          <div class="color-333333">{{ detailInfo.name }}</div>
        </div>
        <div class="flex lht-38">
          <div class="text-right w-120 color-666666 flex-shrink-0">
            {{ t('discountActivity.shopName') }}：
          </div>
          <div class="color-333333">
            {{ detailInfo["tenantName" + locale] }}
          </div>
        </div>
        <div class="flex lht-38">
          <div class="text-right w-120 color-666666 flex-shrink-0">
            {{ t('discountActivity.discountRateLabel') }}：
          </div>
          <div class="color-333333">{{ detailInfo.discountRate }}%</div>
        </div>
        <div class="flex lht-38">
          <div class="text-right w-120 color-666666 flex-shrink-0">
            {{ t('discountActivity.startEndTime') }}：
          </div>
          <div class="color-333333">
            {{ moment(detailInfo.startTime).format("YYYY-MM-DD HH:mm:ss") }} {{ t('discountActivity.to') }}
            {{ moment(detailInfo.endTime).format("YYYY-MM-DD HH:mm:ss") }}
          </div>
        </div>
      </div>

      <!-- 商品列表 -->
      <div class="mt24">
        <div class="color-666666 mb12">{{ t('discountActivity.activityProducts') }}</div>
        <el-table :data="detailInfo.skus" border height="400">
          <el-table-column type="index" :label="t('discountActivity.serial')" width="60" />
          <el-table-column :label="t('discountActivity.productImage')" width="100">
            <template #default="{ row }">
              <el-image :src="row.image" style="width: 50px; height: 50px" />
            </template>
          </el-table-column>
          <el-table-column :prop="'name' + locale" :label="t('discountActivity.productName')" />
          <el-table-column :label="t('discountActivity.productPrice')">
            <template #default="{ row }"> ¥{{ row.minPrice }} </template>
          </el-table-column>
          <el-table-column :prop="'tenantName' + locale" :label="t('discountActivity.shopName')" />
          <el-table-column :label="t('discountActivity.discountPrice')">
            <template #default="{ row }">
              ¥{{ ((row.minPrice * detailInfo.discountRate) / 100).toFixed(2) }}
            </template>
          </el-table-column>
        </el-table>

        <div class="mt12 flex_aic_jcc">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :total="detailInfo.products?.length || 0"
            :page-sizes="[10, 20, 50]"
            layout="total, sizes, prev, pager, next"
          />
        </div>
      </div>
    </div>
  </Dialog>
</template>

<script setup>
import { ref, computed, watch } from "vue";
import Dialog from "@/components/dialog.vue";
import { useI18n } from "vue-i18n";
import moment from "moment";
import Api from "@/config/api/api";

const { t, locale } = useI18n();

const show = defineModel();
const emit = defineEmits(["success"]);
const detailInfo = ref({});
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});

// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);

const currentPageData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return props.data.products?.slice(start, end) || [];
});

const getStatusType = (status) => {
  const map = {
    1: "warning", // 未开始
    2: "success", // 进行中
    3: "info", // 已结束
    4: "danger", // 已取消
  };
  return map[status];
};

const getStatusText = (status) => {
  const map = {
    1: t('discountActivity.status.notStarted'),
    2: t('discountActivity.status.inProgress'),
    3: t('discountActivity.status.ended'),
    4: t('discountActivity.status.cancelled'),
  };
  return map[status];
};

const close = () => {
  show.value = false;
};

const getDetail = () => {
  Api.skuActivity_detail(props.data.id).then((res) => {
    if (res.status === 200) {
      detailInfo.value = res.data;
    }
  });
};

watch(
  () => show.value,
  (newVal) => {
    if (newVal) {
      getDetail();
    }
  }
);
</script>

<style lang="scss" scoped>
.h-500 {
  height: 500px;
}
.lht-38 {
  line-height: 38px;
}
.w-120 {
  width: 120px;
}
.mt24 {
  margin-top: 24px;
}
.detail-info {
  padding: 20px;
  background: #f5f7fa;
  border-radius: 4px;
}
</style>
